<template>

  <div class="goos-list">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="khname" placeholder="请输入内容" style="width: 130px;" />
          <el-button type="primary" icon="el-icon-search" :loading="loading" @click="getlist">搜索</el-button>
          <!-- <el-button type="primary" @click="$router.push('/userlogin/userlogin-add')" icon="el-icon-edit">添加</el-button> -->
          <el-button type="primary" icon="el-icon-edit" @click="$router.push('/BasicInformation/BasicInformation-add')">添加</el-button>
          <!-- <el-button type="primary" icon="el-icon-edit">审核</el-button> -->
          <!-- <el-button type="primary" @click="jiazai" :loading="loading">加载测试</el-button> -->

        </div>
      </el-col>
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%;margin-top: 20px;" border>
      <el-table-column prop="khname" label="序号" align="center" width="180">
        <template slot-scope="{row,$index}">

          <div>{{ $index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="帐号" align="center" width="180">
        <template slot-scope="{row,$index}">
          <div>{{ row.username }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center" width="180">
        <template slot-scope="{row,$index}">
          <div>{{ row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="role_name_list" label="角色" align="center" width="180">
        <template slot-scope="{row,$index}">
          <div>{{ row.role_name_list }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="menu_name_list" label="角色菜单" align="center" width="480">
        <template slot-scope="{row,$index}">
          <div>{{ row.menu_name_list }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{row,$index}">
          <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px;"
      :current-page="page"
      :page-sizes="[13, 50, 500, 5000]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlecurrentChange"
    />
  </div>

</template>

<script>
import { Loading } from 'element-ui'
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      valueselect: '',
      value1: '',
      tableData: [],
      loading: false,
      page: 1, // 第几页
      limit: 13, // 每页多少条数
      count: 0, // 计数器 解决重复请求问题,
      total: 0, // 总页数
      khname: '', // 客户名称
      khdq: ''// 客户地区

    }
  },
  // 监听
  watch: {
    // 当count 变化，就重新查询一下数据
    count() {
      console.log('监听一下')
      this.getlist()
    }
  },
  // 加载界面的时候执行
  created() {
    this.getlist()
  },
  // 我是事件
  methods: {
    jiazai() {
      this.loading = true

      setTimeout(() => {
        this.loading = false
      }, 2000)
    }, // 这个是第几页
    handleSizeChange(val) {
      console.log('页数', val)
      this.limit = val
      if (this.page == 1) {
        this.count++
      }
    }, // 这个是每页多少条
    handlecurrentChange(val) {
      console.log('每页条数', val)
      this.page = val
      this.count++
    },
    // 查询列表信息
    getlist() {
      // console.log('点击了查询按钮')
      this.loading = true
      this.$store.dispatch('userlogin/getquery', { khname: this.khname, page: this.page, limit: this.limit })
        .then(res => {
          if (res.code == 0) {
            this.loading = false
            this.tableData = res.data
            this.total = res.total
          } else {
            this.loading = false
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
          this.loading = false
        })
    },

    // 编辑按钮
    handleEdit(row) {
      this.$router.push('/userlogin/userlogin-add/' + row.guid)
    },
    // 删除按钮
    handleDelete(row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('点击了删除', row)
        // this.$message({
        // 	type: 'success',
        // 	message: '删除成功!'
        // });

        console.log('guid', row.guid)

        this.$store.dispatch('userlogin/isdelete', { guid: row.guid })
          .then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getlist()// 删除成功了就刷新
            } else {
              this.loading = false
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
            this.loading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.goos-list {
	padding: 20px;
	box-sizing: border-box;
}
</style>
